.chat-window {
  width: 100%;
  height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;

  .chat-input {
    flex-shrink: 0;
    border-top: 1px solid var(--color-border-1);
    position: relative;

    .chat-input-textarea {
      border: none;
      background-color: var(--color-bg-1);
    }

    .chat-input-bottom {
      box-sizing: border-box;
      padding: 5px 15px 15px 15px;
      display: flex;
      align-items: center;
      justify-content: flex-end;

      .chat-input-select-image {
        margin-right: auto;
        max-width: 200px;

        :deep(.arco-upload-wrapper) {
          display: flex;
          .arco-upload-list-item-content {
            background-color: transparent;
            padding: 0;
            transition: none;
          }
          .arco-upload-progress {
            display: none;
          }
        }
      }
    }
  }
}

.chat-message-list {
  flex-grow: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 20px;
  box-sizing: border-box;
  padding: 15px;

  .chat-message {
    display: flex;
    align-items: flex-start;
    gap: 15px;

    .chat-message-checkbox,
    .chat-message-avatar {
      flex-shrink: 0;
    }

    .chat-message-content {
      flex: 1;
      min-width: 0;
      max-width: max-content;
      white-space: pre-wrap; // 保留空格和换行
      line-break: anywhere;
      background-color: var(--color-fill-1);
      padding: 10px;
      border-radius: var(--border-radius-small);
      min-height: 1rem;
      line-height: 1.3rem;
      display: flex;
      flex-direction: column;
      gap: 5px;

      .chat-message-md {
        display: flex;
        flex-direction: column;

        :deep(p) {
          margin-block: 0;
          margin: 0; // markerdown 中 p 标签去除外边距，防止消息框撑开太多
        }

        :deep(li) {
          white-space: normal; // 防止列表的 marker 和内容之间存在换行
        }

        :deep(.chat-message-loading) {
          font-weight: 500;
          color: rgb(var(--primary-6));
          animation: alternate-hide-show 900ms ease-in-out infinite;
        }

        @keyframes alternate-hide-show {
          0%,
          50%,
          100% {
            opacity: 1;
          }
          60%,
          90% {
            opacity: 0;
          }
        }
      }

      .chat-message-img {
        background-color: var(--color-fill-1);
        border-radius: var(--border-radius-small);
      }
    }
  }
}
